/* eslint-disable */
import React,{Component} from 'react';
import PropTypes from 'prop-types';
import APILoader from 'react-amap/lib/utils/APILoader';
import _ from 'lodash';

import styles from './index.less';

class Weather extends Component {

  static defaultProps = {
    location: '绍兴市',
    amapkey: '02a3bf2d03850cefb96752b12376653d',
  }

  constructor (props) {
  	super(props);
  	this.state = {
  		weather: '',
      temperature: '',
      weatherImage: '',
      wet:'',
  	};
    this.loader = new APILoader({key: props.amapkey}).load();
  }

  componentDidMount() {
    this.loadWeather();
  }

  componentWillReceiveProps(nProps) {
    if(!_.isEqual(this.props.location, nProps.location)) {
      this.loadWeather(nProps.location);
    }
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  loadWeather = (location = this.props.location) => {
    clearInterval(this.intervalId)

    const self = this;
    const { interval = 1000 * 60 * 60 } = this.props;
    this.loader.then(() => {
      const { AMap } = window;
      AMap.service('AMap.Weather',()=>{
        let weather = new AMap.Weather();
        self.setWeatherState({weather, location});
        self.intervalId = setInterval(() => {
          self.setWeatherState({weather, location})
        }, interval)
      });
    })
  }

  setWeatherState = ({weather, location}) => {
    weather.getLive(location, (err, data)=> {
      if (!err) {
        const weatherImage = ((weather) => {
          switch (true) {
            case weather === '阴' || weather === '多云': {
              return 'cloudy'
            }
            case weather === '晴': {
              return 'sunny'
            }
            case weather==='雷阵雨':{
              return 'thunderstorm';
            }
            case weather.indexOf('风') > -1: {
              return 'breeze'
            }
            case weather.indexOf('雨') > -1: {
              return 'rainy'
            }
            case weather.indexOf('雪') > -1: {
              return 'snow'
            }
            case weather.indexOf('雾') > -1: {
              return 'fog'
            }
            case weather==='霾' :{
              return 'haze';
            }
            default: {
              return 'na'
            }
          }
        })(data.weather);
        this.setState({
          weather: data.weather,
          temperature: data.temperature,
          weatherImage,
          wet:data.humidity,
        })
      }
    });
  };

	render() {
    const { weatherImage, weather, temperature,wet} = this.state;
    const { location, className } = this.props;
    const containerClass = className ? className : styles.mapWeatherContainer;

    return (
      <div className={containerClass}>
        <div className={ styles["cityName"] }>浙江省{`绍兴市${location === '绍兴市' ? '' : location}`}</div>
        {weatherImage !== '' && <img src={require(`../../../../../assets/weather/${weatherImage}.png`)} alt="" className={styles['show-img']}/>}
        <span>
          {temperature}
          <span style={{ fontSize: 12 }}>℃</span>
        </span>
      </div>
    )
  }
}

export default Weather

Weather.propTypes = {
  location: PropTypes.string.isRequired,
  interval: PropTypes.number,
  className: PropTypes.string,
  amapkey: PropTypes.string.isRequired
}
